<template>
   <div>
     <navigator :url="reqUrl">
      <view class="flex-item container">
        <div class="img-container">
          <image :src="url" class="item-img"/>
        </div>
          <div class="item-title">{{title}}</div>
      </view>
     </navigator>
   </div>
</template>

<script>
export default {
  props: ['title', 'url', 'id'],
  data () {

  },
  computed: {
    reqUrl: function () {
      return `./desc/main?id=${this.id}&name=${this.title}`
    }
  }
}
</script>

<style scoped>
  .item-img{
    border-radius: 12px;
    height: 180rpx;
    width: 100%;
  }
  .container{
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    color: #212121;
    width: 33%;
    float: left;
  }
  .img-container{
    padding: 3px 3px 0 3px;
  }
  .item-title{
    font-size: 16px;
    color: #757575;
  }
</style>
